<template>
    <section class="main-content education-main" v-loading="loading"   element-loading-background="rgba(0, 0, 0, 0.8)">
        <h3 class="see-title">课程标题</h3>
        <div class="see-main">
          <div class="see-video">
            <video-player class="vjs-custom-skin bofang-img" :options="playerOptions" :playsinline="true" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)" @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)" @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)" @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied" @statechanged="playerStateChanged($event)" ref="videoPlayer" ></video-player>
          </div>
          <div class="see-list animated" >
            <h3 class="list-title">标题</h3>
            <div class="list-main ">
              <i class="iconfont iconshouqi_m" v-show="shou"></i>
              <i class="iconfont iconshouqi_m-copy" v-show="!shou"></i>
              <el-scrollbar ref="elscrollbar" class="list-all">
                <div class="list-item"  v-for="(item,index) in 8" @click="play1(index)" :class="item.style1">
                  <img src="@/static/image/course1.jpg" alt="">
                  <span class="name">从入门到名师-新师培训24节课,游戏101-岛屿求生</span>
                  <span class="time">时长：58分钟</span>
                  <!-- <i class="iconfont" :class="item.style"></i> -->
                </div>
              </el-scrollbar>
            </div>
            
          </div>
        </div>
    </section>
</template>

<script>
import'@/assets/css/fontsNew/iconfont.css'

import Cookies from 'js-cookie'
import { Notification } from 'element-ui';

export default {
  data(){
    return{
      loading:false,
      shou:true,
      player:null,
      content:{},
      playerOptions: {
        muted: false,
        controls: true,
        autoplay: false,
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        language: 'zh-CN', 
        // playbackRates: [1.0],  //播放速率
        sources: [{
          type: "video/mp4",
          src: "http://vjs.zencdn.net/v/oceans.mp4"
        }],
        poster:"",
        controlBar : {
            timeDivider : true,//当前时间和持续时间的分隔符
            durationDisplay : true,//显示持续时间
            remainingTimeDisplay : false,//是否显示剩余时间功能
            fullscreenToggle : true  //全屏按钮
        },
        hls: false,  //启用hls？
        fluid: true,  //设置播放器为流体  宽度为外层盒子大小  ps：想设置width：100%找不到方法？这个就对了
      },
      List:[

      ],
      studyId:'',
      favicon:'',
      List1:[],
      name:"课时1：培养孩子认真上课是个好习惯",
      videoCourseDetailId:"",
      courseHours:"",
      shangchuan:true,
      isactive:false,
      seconds:null,
      zongTime:null,
      isactive1:false,
      tan:false,
      content:{},
      vip:false,
    }
  },
  computed:{
    
  },
  created(){
    this.favicon = Cookies.get("favicon");
    // this.addCenter();
    // this.addMan();
    //this.name = Cookies.get("webName");
  },
  beforeDestroy(){
   
  },
  destroyed(){
  },
  mounted(){
    
    var that = this;
    if (process.browser) {
      // window.addEventListener( 'beforeunload',e =>(
      //   that.endLoad()
      // ))
    }
    
    //var w = $(window).width();
    // $(function(){
    //   $(".iconshouqi_m").click(function(){
    //       $(".see-list").animate( { right: "-370px" }, 300,function(){
    //         that.shou = false;
    //       });
    //       $(".see-video").animate( { width: "100%" }, 300);
    //   })

    //   $(".iconshouqi_m-copy").click(function(){
    //       $(".see-list").animate( { right: "0" }, 300,function(){
    //         that.shou = true;
    //       });
    //       $(".see-video").animate( { width: (w-370).toString()+"px" }, 300);
    //   })
    // })
    if(Cookies.get("token")){
        //this.getData();
    }
    else{
      //this.$router.push("/login");
    }
    
  },
  head() {
    return {
      title: '观看',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: Cookies.get("description")
        },
        {
          hid: 'keywords',
          name: 'keywords',
          content: Cookies.get("keywords")
        },
      ],
      link: [
          {rel: 'icon', type: 'image/x-icon', href: this.favicon}
      ]
    }
  },
  methods:{
    endLoad(){
      var num = this.player.currentTime();
      var b = Math.floor(num);
      $.ajax({
          url:'/f/video/save_study_time?courseId='+this.$route.params.id+'&detailId='+this.videoCourseDetailId+'&studyTime='+a,
          type:'POST',
          headers: {
              token: Cookies.get("token")
          },
          async:false,    //或false,是否异步
          timeout:5000,    //超时时间
          dataType:'json',    //返回的数据格式：
          success:function(data,textStatus,jqXHR){
          },
          error:function(xhr,textStatus){
          },
          complete:function(){
          }
      })
    },
    getData(){
      var that = this;
      this.$axios.$post("/f/video/db_detail?id="+this.$route.params.id)
      .then(function (response) {
        console.log(response,99911);
        let data = response.data.educationVideo;
        that.vip = response.data.vip;
        data.photo = "http://www.jzcqedu.com:8080"+data.photo;
        if(data.score==""){
          data.score=0
        }
        else{
          data.score = Number(data.score)
        }
        data.buy = response.data.buy;
        data.coll = response.data.coll;
        data.zan = response.data.zan;
        that.content = data;

        //that.studyId = response.data.studyId;
        var list = data.educationVideoDetailsList;
        var len1 = list.length;
        for(var i=0;i<len1;i++){
          list[i].style1 = "";
          list[i].url = list[i].coverUrl;
          list[i].time = Math.ceil(Number(list[i].duration)/60)
        }
        console.log(list)
        that.List1 = list;
        if(that.$route.params.id1!="0"){
          var len = that.List1.length;
          for(var i=0;i<len;i++){
            if(that.$route.params.id1==that.List1[i].id){
              var a = i;
              setTimeout(()=>{    
                that.play(a);
              },100) 
            }
          }
        }
        else{
          var len = that.List1.length;
          for(var i=0;i<len;i++){
            that.List1[i].style1="";
          }
          setTimeout(()=>{
            that.play(0);
          },100) 
        }
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    getNumber(){
      var that = this;
      this.$axios.$post('/f/user/save_user_integral')
      .then(function (response) {
          
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    gerContent(){
      console.log(this.$route.params.id,this.$route.params.id1)
      var that = this;
      this.$axios.$post('http://seed.ckwashington.com/admin/mini/video/detailCourse?courseId='+this.$route.params.id)
      .then(function (response) {
        that.content = response.data.educationVideo;
        that.studyId = response.data.studyId;
        var data = response.data.educationVideo.educationVideoDetailsList;
        
        var len1 = data.length;
        for(var i=0;i<len1;i++){
          data[i].style1 = "";
        }
        console.log(data)
        that.List1 = data;
        if(that.$route.params.id1!="0"){
          var len = that.List1.length;
          for(var i=0;i<len;i++){
            if(that.$route.params.id1==that.List1[i].id){
              var a = i;
              setTimeout(()=>{    
                that.play(a);
              },100) 
            }
          }
        }
        else{
          var len = that.List1.length;
          for(var i=0;i<len;i++){
            that.List1[i].style1="";
          }
          setTimeout(()=>{
            that.play(0);
          },100) 
        }
        that.loading = false;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    shangjin(id,time,num){
      var that = this;
      this.$axios.$post('http://223.247.215.127:8080/user/addVideoDetails?detailsId='+id+'&courseHours='+time+"&seconds="+num)
      .then(function (response) {
          setTimeout(()=>{
            that.shangchuan = true;
          },60*1000)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    play1(index){
      console.log(8898)
      var len = this.List.length;
      var selectItem = {};
      this.List.forEach((item,i)=>{
        if(index==i){
          selectItem = item;
          item.style1="bg1";
          this.videoCourseDetailId = item.id;
          if(item.study==""){
            this.courseHours = 0
          }
          else{
            this.courseHours = Number(item.study);
          }
        }
        else{
          item.style1="";
        }
      });
      this.List[index] = selectItem;
      this.$set(this.List, index, selectItem);
      // this.seconds = Number(this.List[index].seconds);
      setTimeout(()=>{
        this.player.play();
        this.player.currentTime(this.courseHours);
        
      },500)
      
      this.player = this.$refs.videoPlayer.player;
      this.player.src(this.List[index].videoUrl);

      this.isactive = true;
    },
    play(index){
      //this.List = "";
      // console.log(index);
      var len = this.List1.length;

      var List = this.List1;
      for(var i=0;i<len;i++){
        if(index==i){
          List[i].style1="bg1";
          this.videoCourseDetailId = List[i].id;
          if(List[i].study==""){
            this.courseHours = 0
          }
          else{
            this.courseHours = Number(List[i].study);
          }
          
        }
        else{
          List[i].style1="";
        }
      }
      this.List = List;
      console.log(this.courseHours,99)
      // this.seconds = Number(this.List[index].seconds);
      setTimeout(()=>{
        this.player.play();
        this.player.currentTime(this.courseHours);
        
      },500)
      
      this.player = this.$refs.videoPlayer.player;
      this.player.src(this.List[index].videoUrl);

      this.isactive = true;
      // $(function(){
      //   $(".vjs-big-play-button").click();
      //   $(".vjs-control-bar").append("<div class='zhe'>"+"</div>");
      //   var w = $(".vjs-progress-control").width();
      //   console.log(w,666)
      // })
      // setTimeout(()=>{
      //   $(function(){
      //     $(".list-item").mouseover(function(){
      //       $(this).find(".iconbofang2").addClass("iconbofang");
      //       $(this).siblings().find(".iconbofang2").removeClass("iconbofang");
      //     })
      //     $(".list-item").mouseout(function(){
      //       $(this).find(".iconbofang2").removeClass("iconbofang");
      //     })
      //   })
      // },100)
    },
    addCenter(){
      if(Cookies.get("inputPhone")){
        this.$axios.$post('http://223.247.215.127:8080/user/addLearningCenter?courseId='+this.$route.params.id)
        .then(function (response) {
          
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
      }
    },
    addMan(){
      if(Cookies.get("inputPhone")){
        this.$axios.$post('http://223.247.215.127:8080/user/addCourseCount?courseId='+this.$route.params.id)
        .then(function (response) {
          
        })
        .catch(function (error) {
          // handle error
          console.log(error);
        })
      }
    },
    onPlayerPlay(player) {
        if(this.shangchuan==false){
          this.shangchuan = true;
        }
    },
    onPlayerPause(player) {
      
    },
    onPlayerEnded(player) {
      var num = this.player.currentTime();
      var b = Math.floor(num);
      this.addStudyCenter(b,this.zongTime);
      this.getNumber();
    },
    onPlayerLoadeddata(player) {
    },
    onPlayerWaiting(player) {
    },
    onPlayerPlaying(player) {
        
    },
    onPlayerTimeupdate(player) {
      // console.log(7)
    },
    onPlayerCanplay(player) {
    },
    onPlayerCanplaythrough(player) {
        
    },
    // or listen state event
    playerStateChanged(playerCurrentState){
      if(this.isactive == true){
        if(Cookies.get("seeType")=="no" && this.player.currentTime()>Number(Cookies.get("time"))){   
          this.player.pause();
          if(!this.tan){
            this.tan = true;
            this.$confirm('试看时间已到, 请购买课程继续观看?', '提示', {
              confirmButtonText: '确定',
              showCancelButton:false,
              showClose:false,
              closeOnClickModal:false,
              type: 'warning'
            }).then(() => {
              if((this.content.courseVipType=="2" || this.content.courseVipType=="1") && !this.vip){
                this.$router.push("/main/vip");
                return;
              }
              this.$router.push("/main/orderPage/"+this.$route.params.id);
              return;
            }).catch(() => {
                      
            });
          }
        }
        this.zongTime = Math.floor(this.player.currentTime()+this.player.remainingTime());
        var courseHours = 0;
        if(this.courseHours=="" || this.courseHours==0 || this.courseHours=="NaN"){
          var num = this.player.currentTime();
          var b = Math.floor(num);
          courseHours = b;
        }
        else{
          var time = null;
          var num = this.player.currentTime();
          var b = Math.floor(num);
          time = b;
          if(time>=this.courseHours){
            courseHours = time;
          }
          else{
            courseHours = this.courseHours;
          }
        }
        if(this.shangchuan==true){
          if(Cookies.get("type")){
            console.log(12)
            this.shangchuan = false;
            this.addStudyCenter(courseHours,this.zongTime);
          }
        }
      }
      
      

    },
    addStudyCenter(a,b){
      var that = this;
      this.$axios.$post('/f/video/save_study_time?courseId='+this.$route.params.id+'&detailId='+this.videoCourseDetailId+'&studyTime='+a)
      .then(function (response) {
          setTimeout(()=>{
            that.shangchuan = true;
          },5*1000)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
    },
    // player is ready
    playerReadied(player) {
      // seek to 10s
      // player.currentTime(10)
      // console.log('example 01: the player is readied', player)
    }
  }
}
</script>

<style lang="less" >
      .education-main{
        background:#ffffff;
      .fadeOutRight{
        right:-22% !important;
      }
      position:absolute;
      width:100%;
      height:100%;
      overflow:hidden;
      .see-title{
        width:100%;
        height:60px;
        line-height:60px;
        padding-left:30px;
        color:#444444;
        background:#ffffff;
        font-size:20px;
        border-bottom:1px solid #f4f4f4;
        box-sizing:border-box;
      }
      .see-main{
        width:100%;
        height:calc(100% - 60px);
        position:relative;
        .see-video{
          width:calc(100% - 370px);
          height:100%;
          position:absolute;
          top:0;
          left:0;
          .zhe{
            position:absolute;
            width:calc(100% - 12em);
            left:8em;
            height:3em;
            z-index:9999;
            bottom:0;
          }
          .bofang-img{
            height:100%;
            #vjs_video_3{
              height:100%;
              padding-top:0;
              .vjs-big-play-button{
                top: 50%;
                left: 50%;
                -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
              }
            }
          }
        }
        .see-list{
          width:370px;
          height:100%;
          position:absolute;
          top:0;
          right:0;
          background:#14191e;
          box-sizing:border-box;
          border-left:1px solid #f4f4f4;
          float:left;
          .list-item:hover{
            background:#14191e;
            color:#fff !important;
            span{
              color:#fff !important;
            }
          }
          .list-item{
            width:calc(100% - 40px);
            height:140px;
            margin:0 20px;
            margin-bottom:20px;
            margin-top:5px;
            padding:15px;
            background:#f4f4f4;
            position:relative;
            cursor:pointer;
            img{
              width:180px;
              float:left;
              height:110px;
              display:block;
              margin-right:15px;
            }
            .iconbofang{
              position:absolute;
              width:40px;
              height:20px;
              background:#fff;
              border-radius:10px;
              display:block;
              line-height:20px;
              text-align:center;
              color:#3f83f2;
              font-size:14px;
              top:20px;
              right:20px;
            }
            .name{
              width:calc(100% - 195px);
              line-height:25px;
              font-size:16px;
              color:#222222;
              height:75px;
              display: -webkit-box;
              /* autoprefixer: off*/
              -webkit-box-orient: vertical;
              /* autoprefixer: on*/
              -webkit-line-clamp: 3;
              overflow: hidden;
            }
            .time{
              position:absolute;
              line-height:25px;
              right:15px;
              bottom:15px;
              font-size:14px;
              color:#777777;
            }
          }
          .bg1{
            background:#3a7bf3;
            color:#fff !important;
            span{
              color:#fff !important;
            }
          }
          .list-main{
            width:100%;
            height:calc(100% - 60px);
            position:relative;
            background:#ffffff;
            .list-all{
              width:100%;
              height:100%;
            }
            .iconshouqi_m,.iconshouqi_m-copy{
              width:20px;
              height:80px;
              left:-20px;
              top:50%;
              cursor:pointer;
              transform:translateY(-50%);
              position:absolute;
              background:rgba(0,0,0,0.3);
              z-index:9999;
              line-height:80px;
              text-align:center;
              font-size:16px;
              border-radius:20px 0 0 20px;
              color:#fff;
              display:block;
            }
            .el-scrollbar__wrap{
              overflow-x:hidden;
            }
            .el-scrollbar__thumb {
                background: #2b2b2b;
            }
          }
          .list-title{
            width:100%;
            padding:0 20px;
            text-align:center;
            line-height:60px;
            overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
            height:60px;
            font-size:20px;
            color:#3a7bf3;
            box-sizing:border-box;
            border-bottom:1px solid #f4f4f4;
            background:#ffffff;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
    
    
    @import '../assets/css/style.less';
</style>



